/*

    页面css


*/

/* 头部 */
html, body {
  background-color: #fff;
}

header {
  a {
    display: block;
    width: 100%;

    img {
      display: block;
      width: 100%;
    }
  }
}

nav {
  padding-top: 60px;
  padding-bottom: 65px;

  ul {
    display: flex;
    justify-content: center;

    li {
      a {
        img {
          display: block;
          width: 100%;
        }

        p {
          text-align: center;
          color: #4a4a4a;

          &:nth-of-type(1) {
            font-size: 18px;
            line-height: 18px;
            margin-top: 19px;
            margin-bottom: 11px;
          }

          &:nth-of-type(2) {
            font-size: 12px;
            line-height: 12px;
          }
        }
      }

      &:nth-of-type(-n+3) {
        margin-right: 100px;
      }
    }
  }
}

main {
  margin-bottom: 104px;

  a {
    img {
      display: block;
      width: 100%;
    }
  }
}

/* 底部 */
//footer {
//  width: 100%;
//  display: flex;
//  justify-content: space-between;
//
//  a {
//    &:nth-of-type(1) {
//      flex: 1;
//    }
//
//    &:nth-of-type(2) {
//      flex: 1;
//    }
//  }
//
//  div {
//    flex: 1;
//    margin-top: 43px;
//    transform: translateX(-20px);
//    background: url("../img/form_back.png") no-repeat center center;
//    background-size: contain;
//    padding-top: 37px;
//
//
//    p {
//      margin-top: 10px;
//      width: 290px;
//      height: 62px;
//      background-color: #232221;
//      border-radius: 10px;
//      opacity: 0.71;
//      font-family: PingFangSC-Bold, serif;
//      line-height: 62px;
//      text-align: center;
//      color: #fff;
//      font-size: 30px;
//      margin-left: 14px;
//    }
//
//    form {
//      padding-bottom: 14px;
//      width: 292px;
//      height: 328px;
//      background-color: rgba(177,153,105,.3);
//      border-radius: 10px;
//      margin-left: 13px;
//      margin-top: 16px;
//      padding-top: 42px;
//
//      input {
//        width: 269px;
//        height: 50px;
//        background-color: #ffffff;
//        margin-left: 11px;
//        padding-left: 12px;
//
//        &:nth-of-type(1) {
//
//        }
//
//        &:nth-of-type(2) {
//          margin-top: 30px;
//          margin-bottom: 30px;
//        }
//
//        &:nth-of-type(3) {
//
//        }
//      }
//      button{
//        cursor: pointer;
//        width: 138px;
//        height: 36px;
//        background-color: #232221;
//        border-radius: 10px;
//        font-size: 18px;
//        line-height: 36px;
//        font-family: PingFangSC-Bold, serif;
//        color: #fff;
//        border: none;
//        margin: 25px auto 0 78px;
//      }
//    }
//  }
//}


footer {
  width: 100%;
  display: flex;
  justify-content: space-between;

  div {
    font-family: PingFangSC-Bold;
    &:nth-of-type(1) {
      flex: 0 0 43%;
      //background-color: #00F7DE;

      a {
        img {
          display: block;
          width: 100%;
        }
      }
    }

    &:nth-of-type(2) {
      flex: 0 0 17%;
      height: 478px;
      background-color: #e3c483;
      box-shadow: 5px 3px 13px 1px rgba(213, 175, 94, 0.83);
      background-size: contain;
      padding-top: 37px;
      transform: translateX(-20px);
      margin: 30px auto 0;

      p {
        width: 300px;
        height: 62px;
        background-color: rgba(35, 34, 33, .71);
        line-height: 62px;
        text-align: center;
        color: #fff;
        font-size: 30px;
        margin: 0 auto;
        border-radius: 10px;
        margin-bottom: 16px;
      }

      form {
        width: 300px;
        border-radius: 10px;
        background-color: rgba(177,153,105,.71);
        margin: 0 auto;
        padding-top: 42px;
        padding-bottom: 20px;

        input {
          display: block;
          width: 269px;
          height: 50px;
          background-color: #ffffff;
          margin: 0 auto;
          padding-left: 12px;
          &:nth-of-type(1){

          }
          &:nth-of-type(2){
            margin-top: 26px;
            margin-bottom: 27px;
          }
          &:nth-of-type(3){

          }
        }
        button{
          display: block;
          width: 138px;
          height: 36px;
          background-color: #232221;
          border-radius: 10px;
          line-height: 36px;
          text-align: center;
          color: #fff;
          border: none;
          font-size: 18px;
          margin: 25px auto;
        }
      }
    }

    &:nth-of-type(3) {
      flex: 0 0 35%;
      height: 540px;
      //background-color: #f7b0bd;

      a {
        img {
          display: block;
          width: 100%;
        }
      }
    }
  }
}
